<script lang="ts" setup>
// #region 引入包, 函数和组件
// import { ref } from "vue"
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, onUnmounted } from 'vue'
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
;(
  window as Window & typeof globalThis & { _AMapSecurityConfig: { securityJsCode: string } }
)._AMapSecurityConfig = {
  securityJsCode: '3bf665787c4f456b5925c8eec4a50f66',
}
// #endregion

// #region // 变量
let AMap, map: { destroy: () => void }
// #endregion

// #region // 函数

// #endregion

// #region // 生命周期和vue函数
onMounted(async () => {
  AMap = await AMapLoader.load({
    key: '76324f13eb54034fccf577019006fa43', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
  if (!AMap) return
  map = new AMap.Map('container', {
    // 设置地图容器id
    viewMode: '3D', // 是否为3D地图模式
    zoom: 11, // 初始化地图级别
    center: [116.397428, 39.90923], // 初始化地图中心点位置
  })
})
onUnmounted(() => {
  map.destroy()
})
// #endregion
</script>

<template>
  <div id="container">角色列表</div>
</template>

<style lang="scss" scoped></style>
